<script>
/**
 * title
 * @return {[type]} [description]
 */
import ImgUp from '@/components/fileupImgBase'
import FileUp from '@/components/fileupBase'
// import Player from '@/components/player'
export default{
	components:{
		ImgUp,
		FileUp,
		// Player
	},
	props:{

	},
	data(){
		return {
			visible:false,
			data:{},
			brandlist:[],
			fileup:{
				file:{},
				filelist:[],
			},
			fileupthumb:{
				file:{},
				filelist:[],
			},
			loading:false,
		}
	},
	created(){
		this.getbrand();
	},
	mounted(){
		// this.$refs.player.show(1);
	},
	methods:{
		async getbrand(){
			let rs	=	await this.muajax.fodMinList();
			if(rs.status==200){
				this.brandlist=rs.data;
			}
		},//获取分类
		send(){
			// 检查对应类型与对应资源和数量是否匹配
			this.$refs.forms.validate().then(async ()=>{
				console.log('验证通过',this.data,this.$refs.fileup.urlList());
				this.loading=true;
				let rs = await this.muajax.fodfodSave({
					...this.data,
					src:this.data.stype==1?[]:this.$refs.fileup.urlList()
				});
				this.loading=false;
				if(rs.status==200){
					this.$message.success(rs.msg);
					this.visible=false;
				}
			}).catch(err=>{
				this.loading=false;
				console.log('验证不通过');
				console.log(err)
				// this.$errorFocus(err);
			})
		},
		async datainit(){
			let rs = await this.muajax.fodfodGet({ id : this.param.id});
			if(rs.status==200){
				this.data=rs.data;
				if(rs.data?.src?.length>0){
					rs.data.src.forEach(item=>{
						this.fileup.filelist.push({
							uid: '-1',
							name: item,
							status: 'done',
							url:item,
						})
					})
				}
				if(rs.data.thumb){
					this.fileupthumb.filelist.push({
							uid: '-1',
							name: '视频封面',
							status: 'done',
							url:rs.data.thumb,
					})
				}
			}
		},//初始化本页数据
		show(show,param){
			this.visible=show;
			if(show){
				this.data={src:[],sort:10,stype:1};
				this.fileup.filelist=[];
				this.fileupthumb.filelist=[];
				this.param=param;
				if(!!this.param?.id)
					this.datainit();
			}
		},
		setchange(){
			this.fileup.filelist=[];
		},//改变文案类型
		setthumb(path){
			console.log(path)
			this.data.thumb=path;
			this.fileupthumb.filelist=[{
										uid: '-1',
										name: '视频封面',
										status: 'done',
										url:path,
								}]
		},//视频上传自动更新封面
	},
	computed:{},
	watch:{

	},
	filters:{},
}
</script>
<template>
	<a-modal
		v-model:visible="visible"
		width="800px"
		title="分类管理"
		:maskClosable="false"
		@ok="send"
		cancelText="取消"
		okText="提交"
		:confirmLoading="loading"
	>
		<a-form
		ref="forms"
		:model="data"
		>
			<!-- <div @click="$refs.player.show(true);">123</div> -->
			<a-form-item
				label="分类"
				:labelCol="{span: 4}"
				name="sid"
				:rules="[{required:true,message:'请选择分类'}]"
			>
				<a-select
					placeholder="请选择"
					style="width:200px"
					:dropdownMatchSelectWidth="false"
					v-model:value="data.sid"
					:allowClear="true"
				>
					<a-select-option v-for="v in brandlist" :key="v.id">{{ v.name }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item
				label="内容类型"
				:labelCol="{span: 4}"
				name="stype"
				:rules="[{required:true,type:'number',message:'请选择类型'}]"
			>
				<a-radio-group v-model:value="data.stype" @change="setchange">
					<a-radio :value="1">仅文案</a-radio>
					<a-radio :value="2">文案加图片</a-radio>
					<a-radio :value="3">文案加小视频</a-radio>
					<a-radio :value="4">文案加音频</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item
				label="文案"
				:labelCol="{span: 4}"
				name="text"
				:rules="[{required:true,message:'请输入文案'}]"
			>
				<!-- <a-input
					placeholder="请输入"
					v-model:value="data.text"
				/> -->
				<a-textarea
					placeholder="请输入"
					v-model:value="data.text"
					style="height:200px"
				/>
			</a-form-item>
			<!-- <a-form-item
				label="描述内容"
				:labelCol="{span: 4}"
				name="desc"
				:rules="[{required:true,message:'请输入描述内容'}]"
			>
				<a-textarea
					placeholder="请输入"
					v-model:value="data.desc"
				/>
			</a-form-item> -->
			<div class="upbox" v-if="data.stype!=1">
				<a-form-item
					label="上传媒体资源"
					:labelCol="{span: 4}"
					name="src"
					:rules="[{required:true,type:'array',message:'请上传文件',trigger: 'blur'}]"
				>
					<div v-show="data.stype==2">
						<ImgUp
							accept="image/png, image/jpeg"
							ref="imgup"
							:fileup="fileup"
							:api="muajax.api.fodFileup"
							@done="head=>data.src=$refs.imgup.urlList()"
							@del="data.thumb=''"
							:num="9"
							:move="true"
						/>
					</div>
					<div v-show="data.stype==3 || data.stype==4">
						<FileUp
							ref="fileup"
							:ext="data.stype==3?'mp4' : 'mp3'"
							:fileup="fileup"
							:api="muajax.api.fodFileup"
							@done="head=>data.src=$refs.fileup.urlList()"
							@videothumb="setthumb"
						/>
					</div>
				</a-form-item>
			</div>
			<div class="upbox" v-if="data.stype==3">
				<a-form-item
					label="上传视频封面"
					:labelCol="{span: 4}"
				>
					<ImgUp
						accept="image/png, image/jpeg"
						ref="thumbup"
						:fileup="fileupthumb"
						:api="muajax.api.fodFileup"
						@done="head=>data.thumb=head"
						@del="data.thumb=''"
						:num="1"
					/>
				</a-form-item>
			</div>
		</a-form>
	</a-modal>
	<!-- <Player
		ref="player"
	/> -->
</template>
<style lang="less" scoped>
.upbox{
	:deep(.ant-form-item-control){
		overflow: hidden;
	}
 }
</style>